window.closedSwiper = false;
const mobileTopMediaHeight = 70;

function preventDefault(e) {
  console.log('preventDefault');
  if (e.target.closest('cart-drawer') == null) {
    e.preventDefault();
  }
}

let cururentScrollTop = 0;
function iosFocusin (e) {
  //record
  if (e.target.tagName === 'INPUT') {
    cururentScrollTop = $(window).scrollTop();
  }
}

function iosFocusout (e) {
  //reset
  if (e.target.tagName === 'INPUT') {
    $(window).scrollTop(cururentScrollTop);
  }
}

function androidFocus ()  {
  const innerHeight = window.innerHeight;
  const newInnerHeight = window.innerHeight;
  if (innerHeight > newInnerHeight) {
    cururentScrollTop = $(window).scrollTop();
  } else {
    $(window).scrollTop(cururentScrollTop);
  }
}

window.myScroll = null;

function getWinHeight () {
  var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
  
  return viewportHeight;
}
class SwiperProductModal {
  constructor (id) {
    this.createTimeLine();
    this.scoller = null;
    this.rolling = false;
    this.sliderHeight = 0;
    this.titleHeight = 0;
    this.node = document.querySelector(`#${id}`);
    this.swipeEvents();
    this.bindTouch();
    this.dialogEvent();
  }
  
  createTimeLine () {
    return new TimelineMax();
  }
  
  bottomHide (timeline, force) {
    const bottomNode = $('.modal-product .sticky-left');
    if (!!force || (!bottomNode.data('hide') && !this.rolling)) {
      let tl;
      if (timeline) {
        tl = timeline;
      } else {
        tl = new TimelineMax();
      }
      const stikyHeight = bottomNode.outerHeight();
      tl.fromTo('.modal-product .sticky-left', 1, { 'height': `${stikyHeight}px` }, { 'height': '0' }, 0 );
      bottomNode.data('hide', true);
    }
  }
  
  bottomActive (timeline, force) {
    const bottomNode = $('.modal-product .sticky-left');
    if (!!force || (bottomNode.data('hide') && !this.rolling)) {
      let tl;
      if (timeline) {
        tl = timeline;
      } else {
        tl = new TimelineMax();
      }
      let serviceHeight = 0;
      let shippingMetafieldsHeight = 0;
      const serviceNode = $('.sticky-left .service');
      if (serviceNode.length) {
        serviceHeight = $('.sticky-left .service').outerHeight()
      }
      
      const shippingTimeMetaFieldNode = $('.sticky-left .shipping_metafields');
      if (shippingTimeMetaFieldNode.length) {
        shippingMetafieldsHeight = $('.sticky-left .shipping_metafields').outerHeight();
      }
      
      tl.fromTo('.modal-product .sticky-left', 1, { 'height': '0' }, { 'height': `${ serviceHeight + shippingMetafieldsHeight }px` }, 0);
      bottomNode.data('hide', false);
    }
  }
  
  createIScroll () {
    const myScroll = window.myScroll = new IScroll('#scroll-container', {
      probeType: 3
    });
    
    let lastScrollTop = 0;
    
    myScroll.on('scrollEnd', () => {
      const currentScrollTop = myScroll.y;
      if (currentScrollTop >= lastScrollTop) {
        // scroll down
        const body = document.querySelector('body');
        if (!body.classList.contains('model-product-overflow-hidden') && $('.product__info-wrapper').scrollTop() < 15 && !this.rolling) {
          this.scrollDown();
        }
      }
      if (myScroll.directionY < 0) {
        this.bottomActive()
      } else {
        this.bottomHide();
      }
    })
  }
  
  dialogEvent () {
    const imageNode = document.querySelector('#large-image');
    const body = document.querySelector('body');
    imageNode.addEventListener('click', () => {
      if (body.classList.contains('model-product-closed')) {
        const dialogProductNode = document.querySelector('dialog-product');
        dialogProductNode.show();
      }
    });
  }
  
  bindTouch () {
    const modelNode = document.querySelector('#model-product');
    let startX, startY;
    modelNode.addEventListener('touchstart', (e) => {
      startX = e.touches[0].clientX;
      startY = e.touches[0].clientY;
    })
    
    modelNode.addEventListener('touchmove', (e) => {
      e.preventDefault();
      e.stopPropagation();
    });
    
    modelNode.addEventListener('touchend', (e) => {
      
      const rawDeltaY = e.changedTouches[0].clientY - startY;
      const deltaX = Math.abs(e.changedTouches[0].clientX - startX);
      const deltaY = Math.abs(e.changedTouches[0].clientY - startY);
      const threshold = 15; // 设置一个阈值
      if (deltaX > threshold || deltaY > threshold) {
        // 用户已开始滑动，执行滑动事件的处理
        const body = document.querySelector('body');
        if (body.classList.contains('model-product-overflow-hidden') && rawDeltaY < 0 && !this.rolling) {
          this.scrollUp();
        }
      }
    })
  }
  
  scrollUp () {
    if (this.rolling) {
      return;
    }
    window.closedSwiper = true;
    const sliderHeight = $(".slider-container").height();
    const titleHeight = $(".model-product-title").height();
    this.sliderHeight = sliderHeight;
    this.titleHeight = titleHeight;
    $(".product__media-wrapper__container").css({
      height: `${mobileTopMediaHeight}px`
    })
    this.rolling = true;
    const tl = this.createTimeLine();
    
    tl.fromTo('.slider-container', 1, { 'position': 'absolute', 'top': 0, }, { 'width': `${mobileTopMediaHeight}px`, 'padding': 0, 'top': '0', 'left': '80%', 'z-index': '10002', ease: Linear.easing })
    tl.fromTo('.model-product-title', 1, { 'position': 'absolute', 'top': 0,'padding-right':'26px', 'padding-left': '26px','padding-top': `${sliderHeight}px`, 'width': '100%' }, { 'padding-top': '0', ease: Linear.easing, 'width': '100%' }, 0 )
    tl.fromTo('.model-product-title .price__sale .price__compare', 1, { 'opacity': '1', 'right': '0' }, { 'opacity': '0', 'right': '50%'}, 0);
    tl.fromTo(
      '.product__info-wrapper', 1, { 'padding-top': `${sliderHeight + titleHeight - mobileTopMediaHeight}px`,},
      {
        'padding-top': '0',
        ease: Linear.easing,
        onComplete: () => {
          document.querySelector('body').classList.remove('model-product-overflow-hidden');
          document.querySelector('body').classList.add('model-product-closed');
          
          const winHeight = getWinHeight();
          
          // The height of bottom contains the height of the element that would be hidden with a delay.
          const bottomHeight = $('#bottom-pixel').outerHeight();
          
          const gobackHeight = $('.go-back').height();
          const { y: navHeaderHeight } = this.calculateNavPosition();
          
          //Since the bottom element is hidden with a delay, the height of the hidden element needs to be calculated in advance.
          let serviceHeight = 0;
          let shippingMetafieldsHeight = 0;
          const serviceNode = $('.sticky-left .service');
          if (serviceNode.length) {
            serviceHeight = $('.sticky-left .service').outerHeight()
          }
          
          const shippingTimeMetaFieldNode = $('.sticky-left .shipping_metafields');
          if (shippingTimeMetaFieldNode.length) {
            shippingMetafieldsHeight = $('.sticky-left .shipping_metafields').outerHeight();
          }
          
          // container height equals windows height minus bottom mudules height minus goback button height minus top nav height minus mobileTopMediaHeight 
          // But the bottom module here contains the service module that needs to be hidden later and the 
          // so need to add its height back
          const containerHeight = winHeight - bottomHeight - gobackHeight - navHeaderHeight - mobileTopMediaHeight + serviceHeight + shippingMetafieldsHeight;
          $('#scroll-container').css({
            height: `${containerHeight}px`
          });
          this.rolling = false;
          this.bottomHide();
          this.createIScroll();
          window.myScroll.enable();
        }
      },
      0
    )
    
    tl.fromTo('.separate-line', 1, { 'position': 'absolute', 'top': `${sliderHeight + titleHeight - mobileTopMediaHeight + mobileTopMediaHeight }px` }, { 'top': `${mobileTopMediaHeight}px` }, 0 );
    tl.fromTo('.separate-line', 1, { 'opacity': '0', 'visibility': 'hidden' }, { 'opacity': '1', 'visibility': 'visible' }, 0 );
    
    $('#model-product').addClass('modal-product-scroll-up');
  }
  
  calculateNavPosition () {
    const node = document.querySelector('#product-nav-header');
    const pos = node.getBoundingClientRect();
    return {
      x: pos.x,
      y: pos.y,
      height: pos.height
    }
  }
  
  scrollDown () {
    // rolling, not perform any operation
    if (this.rolling) {
      return;
    }
    window.myScroll.disable();
    window.closedSwiper = false;
    this.rolling = true;
    
    $(".product__media-wrapper__container").css({ height: 'unset' })

    const tl = this.createTimeLine();
    
    tl.to('#scroller',1, { x:0, y: 0 });
    tl.fromTo('.slider-container', 1, { 'position': 'absolute' }, { 'width': '302px', 'padding': '0 26px', 'top': '0', 'left': '50%', 'right': 'unset', ease: Linear.easing }, 0);
    tl.fromTo('.model-product-title', 1, { 'position': 'absolute', 'top': 0, 'padding-top': '0', 'width': '100%' }, { 'position': 'absolute', 'top': `${this.sliderHeight}px`, ease: Linear.easing, 'width': '100%' }, 0 );
    tl.fromTo('.model-product-title .price__sale .price__compare',1, { 'opacity': '0', 'right': '50%' }, { 'opacity': '1', 'right': '0' }, 0);
    
    document.querySelector('body').classList.remove('model-product-overflow-hidden');
    document.querySelector('body').classList.add('model-product-closed');
    
    $('#scroll-container').css({ height: `unset` });
    
    tl.fromTo('.product__info-wrapper', 1, { 'padding-top': `${mobileTopMediaHeight}px` },
      {
        'height': '',
        'padding-top': `${this.sliderHeight + this.titleHeight}px`,
        ease: Linear.easing,
        onComplete: () => {
          document.querySelector('body').classList.add('model-product-overflow-hidden');
          document.querySelector('body').classList.remove('model-product-closed');
          this.rolling = false;
          this.bottomActive();
        }
      },
      0
    );
    
    tl.fromTo('.separate-line', 1, { 'position': 'absolute', 'top': `${mobileTopMediaHeight}px`, }, { 'top': `${this.sliderHeight + this.titleHeight}px` }, 0);
    tl.fromTo('.separate-line', 1, { 'opacity': '1' }, { 'opacity': '0' }, 0 );
    
    $('#model-product').removeClass('modal-product-scroll-up');
  }
  
  swipeEvents () {
    const node = this.node;
    let startX, startY, endX, endY;
    
    node.addEventListener('touchstart', (event) => {
      startX = event.touches[0].clientX ;
      startY = event.touches[0].clientY ;
    });
    
    node.addEventListener('touchend', (event) => {
      endX = event.changedTouches[0].clientX;
      endY = event.changedTouches[0].clientY ;
      // accidental touch, not need perform any operation
      if (Math.abs(endX - startX) < 50) {
        return;
      }
      
      //swipe left or right 
      if(Math.abs(endX - startX) - Math.abs(endY - startY) > 0) { //swipe
        event.stopPropagation();
        event.preventDefault();
        //swipe left
        if (startX > endX) {// swipe left
          this.swipe(-1);
        } else if (startX <  endX) { // swipe right
          this.swipe(1);
        }
      }
    })
  }
  
  swipeLeft () {
    var Upcolor = document.getElementById('color_label').innerHTML.toLowerCase().replace(/(^\s*)|(\s*$)/g, "" ).replace(" ","_");
    var color_attribute = '[thumbnail-color="' + Upcolor + '"]';
    const colorThumbsList = $(color_attribute);
    const len = colorThumbsList.length;
    let index = window.globalData['currentProductThumbsIndex'];
    
    if (index === 0) {
      index = window.globalData['currentProductThumbsIndex'] = len - 1;
    } else {
      index = window.globalData['currentProductThumbsIndex'] = window.globalData['currentProductThumbsIndex'] - 1;
    }
    const nextThumbsNode = colorThumbsList[index];
    nextThumbsNode.click();
  }
  
  swipeRight () {
    var Upcolor = document.getElementById('color_label').innerHTML.toLowerCase().replace(/(^\s*)|(\s*$)/g, "" ).replace(" ","_");
    var color_attribute = '[thumbnail-color="' + Upcolor + '"]';
    const colorThumbsList = $(color_attribute);
    const len = colorThumbsList.length;
    let index = window.globalData['currentProductThumbsIndex'];
    
    if (index === len - 1) {
      index = window.globalData['currentProductThumbsIndex'] = 0;
    } else {
      index = window.globalData['currentProductThumbsIndex'] = window.globalData['currentProductThumbsIndex'] + 1;
    }
    const nextThumbsNode = colorThumbsList[index];
    nextThumbsNode.click();
  }
  
  swipe (direction) {
    if (direction === 1) {
      this.swipeLeft();
    } else if (direction === -1) {
      this.swipeRight();
    }
    return false;
  }
}

class ProductModalOpener extends HTMLElement {
  constructor() {
    super();
    const button = this.querySelector('button');

    if (button) {
      button.addEventListener('click', () => {
        const modal = document.querySelector(this.getAttribute('data-modal'));
        if (modal) modal.show(button);
      });
    }
    
    
    const nextHandler = this.querySelector('#next-handler');
    const preHandler = this.querySelector('#pre-handler');
    
    if (nextHandler) {
      nextHandler.addEventListener('click', () => {
        this.next();
      })
    }
    
    if (preHandler) {
      preHandler.addEventListener('click', () => {
        this.pre();
      })
    }
  }
  
  next () {
    var Upcolor = document.getElementById('color_label').innerHTML.toLowerCase().replace(/(^\s*)|(\s*$)/g, "" ).replace(" ","_");
    var color_attribute = '[thumbnail-color="' + Upcolor + '"]';
    const colorThumbsList = $(color_attribute);
    const len = colorThumbsList.length;
    let index = window.globalData['currentProductThumbsIndex'];
    if (index === len - 1) {
      index = window.globalData['currentProductThumbsIndex'] = 0;
    } else {
      index = window.globalData['currentProductThumbsIndex'] = window.globalData['currentProductThumbsIndex'] + 1;
    }
    
    const nextThumbsNode = colorThumbsList[index];
    nextThumbsNode.click();
  }
  
  pre () {
    var Upcolor = document.getElementById('color_label').innerHTML.toLowerCase().replace(/(^\s*)|(\s*$)/g, "" ).replace(" ","_");
    var color_attribute = '[thumbnail-color="' + Upcolor + '"]';
    const colorThumbsList = $(color_attribute);
    const len = colorThumbsList.length;
    let index = window.globalData['currentProductThumbsIndex'];
    if (index === 0) {
      index = window.globalData['currentProductThumbsIndex'] = len - 1;
    } else {
      index = window.globalData['currentProductThumbsIndex'] = window.globalData['currentProductThumbsIndex'] - 1;
    }
    
    const nextThumbsNode = colorThumbsList[index];
    nextThumbsNode.click();
  }
}

customElements.define('product-modal-opener', ProductModalOpener);

class ModalProduct extends HTMLElement {
  constructor() {
    super();
    this.type = 'p';
    this.events();
    this.calculateLayout();
    this.setAttr();
    this.scroller = null;
  }
  
  events () {
    $(".order_now_button").on('click', () => {
      this.show();
    })
    
    $("#go-back-btn").on('click', () => {
      this.hide();
    });
    
    $("#modal-product-close").on('click', () => {
      this.hide();
    });
    
    $(document).on("click", (event) => {
      if (
        event.target.closest(".modal-product-tag") === null &&
        event.target.closest('modal-product') === null &&
        event.target.closest('cart-drawer') === null &&
        event.target.closest('modal-dialog') === null &&
        event.target.closest('modal-dialog-form') === null &&
        !document.querySelector('cart-drawer').classList.contains('active')
      ) {
        const width = $(window).width();
        if (width > 990) {
          this.hide();
        }
      }
    })
    
    const titleNode = this.querySelector('#model-product-title');
    
    titleNode.addEventListener('click', () => {
      const body = document.querySelector('body');
      if (body.classList.contains('model-product-closed')) {
        this.scroller.scrollDown();
      }
    });
    
    // modal dialog cause iphone keyborad
    if (/Android/gi.test(navigator.userAgent)) {
      window.addEventListener('resize', androidFocus);
    } else {
      window.addEventListener('focusin', iosFocusin);
      window.addEventListener('focusout', iosFocusout);
    }
  }
  
  calculateLayout () {
    const width = $(window).width();
    if (width < 990) {
      this.classList.add('mobile-model-product');
      $('body').addClass('mobile-model-product-body');
      this.type = 'm'
    } else {
      this.type = 'p';
      this.classList.remove('mobile-model-product');
      $('body').removeClass('mobile-model-product-body')
    }
  }
  
  /**
   * 显示浮层
   */
  show () {
    document.body.addEventListener('touchmove', preventDefault, { passive: false });
    document.querySelector('#shopify-section-footer-newsletter').setAttribute('style', 'z-index: -1;');
    document.querySelector('#shopify-section-footer').setAttribute('style', 'z-index: -1;');
    if (this.type === 'p') {
      if (this.classList.contains("modal-hidden")) {
        this.setAttr();
        $(".modal-product-collection").removeClass("modal-hidden");
        $('body').addClass('overflow-modal-hidden');
        this.updateLayout();  
      } else {
        this.hide();
      }
    } else {
      
      this.reset();
      const node = document.querySelector('#product-nav-header');
      const pos = node.getBoundingClientRect();
      
      $('modal-product').css({
        top: `${ pos.y + 48 }px`
      })
      
      // show go-back tab
      $(".position_sticky").addClass('active');
      this.classList.add('active');
      
      if (this.classList.contains("modal-hidden")) {
        this.setAttr();
        $(".modal-product-collection").removeClass("modal-hidden");
        $('body').addClass('overflow-modal-hidden');
        $('body').addClass('model-product-overflow-hidden');
        this.updateLayout();
        
        if (!this.scroller) {
          this.scroller =  new SwiperProductModal('slider-container-handler');
        } 
      } else {
        this.hide();
      }
    }
  }
  
  hide () {
    document.body.removeEventListener('touchmove', preventDefault, { passive: false });

    if (this.type === 'p') {
      $(".modal-product-collection").addClass("modal-hidden");
      $('body').removeClass('overflow-modal-hidden');
    } else {
      $(".position_sticky").removeClass('active');
      this.classList.remove('active');
      $(".modal-product-collection").addClass("modal-hidden");
      $('body').removeClass('overflow-modal-hidden');
      $('body').removeClass('model-product-overflow-hidden');
      document.querySelector('body').classList.remove('model-product-closed');
      window.myScroll.disable();
      setTimeout(() => {
        document.querySelector('.product__media-wrapper__container').removeAttribute('style');
        document.querySelector('#model-product').removeAttribute('style');
        document.querySelector('#scroll-container').removeAttribute('style');
        document.querySelector('#slider-container-handler').removeAttribute('style');
        document.querySelector('.model-product-title').removeAttribute('style');
      }, 1000);
    }
    
    // pc and mobile also need remove style
    setTimeout(() => {
      document.querySelector('#shopify-section-footer-newsletter').removeAttribute('style');
      document.querySelector('#shopify-section-footer').removeAttribute('style');
    })
  
  }
  
  reset () {
    window.myScroll && window.myScroll.disable();
    document.querySelector('.product__media-wrapper__container').removeAttribute('style');
    document.querySelector('#model-product').removeAttribute('style');
    document.querySelector('#scroll-container').removeAttribute('style');
    document.querySelector('#slider-container-handler').removeAttribute('style');
    document.querySelector('.model-product-title').removeAttribute('style');
    document.querySelector('.separate-line').removeAttribute('style');
  }
  
  setAttr () {
    const winHeight = getWinHeight();
    
    const menuNode = document.getElementById('position_sticky');
    const top = menuNode.getBoundingClientRect().top;
    const menuHeight = $('.position_sticky').height();
    
    if (this.type === 'm') {
      const extra = 48;//go-back tab
      $(this).css({
        height: `${winHeight - top - menuHeight}px`
      })
    } else {
      $(this).css({
        height: `${winHeight - top - menuHeight }px`
      })
    }
  }
  
  updateLayout () {
    if (this.type === 'p') {
      const winHeight = $(window).height();
      const menuNode = document.getElementById('position_sticky');
      const top = menuNode.getBoundingClientRect().top;
      
      const menuHeight = $('#position_sticky-menu').height();
      const container = this.querySelector('#product__media-handler');
      const bottomPixel = this.querySelector('#bottom-pixel');
      const bottomPixelHeight = $(bottomPixel).outerHeight() > 0 ? $(bottomPixel).outerHeight() : 68;
      
      const clientBoxHeight = winHeight - bottomPixelHeight - top - menuHeight;
      const containerHeight =  $(container).height();
      container.setAttribute('style', `top: ${ (clientBoxHeight - containerHeight) / 2}px;`)
    }
  }
}

customElements.define('modal-product', ModalProduct);
class DialogProduct extends HTMLElement {
  constructor() {
    super();
    this.init();
    this.bindEvent();
    this.index = 0;
  }
  
  bindEvent () {
    const dialogCloseNode = document.querySelector('#dialog-product-close');
    dialogCloseNode.addEventListener('click', (event) => {
      const dialogProductNode = document.querySelector('dialog-product');
      dialogProductNode.hide();
      event.stopPropagation();
      event.stopImmediatePropagation();
      return false;
    });
    
    $(".product-dialog-select__container-overlay").on('click', (event) => {
      const dialogProductNode = document.querySelector('dialog-product');
      dialogProductNode.hide();
      event.stopPropagation();
      event.stopImmediatePropagation();
      return false;
    });
    
    const dialogProductNode = document.querySelector('dialog-product');
    
    let startX;
    dialogProductNode.addEventListener('touchstart', (e) => {
      startX = e.touches[0].clientX;
    })
    
    dialogProductNode.addEventListener('touchend', (e) => {
      const rawDeltaX = e.changedTouches[0].clientX - startX;
      const deltaX = Math.abs(e.changedTouches[0].clientX - startX);
      const threshold = 15; // 设置一个阈值
      if (deltaX > threshold && rawDeltaX > 0) {
        dialogProductNode.prev();
      }
      if (deltaX > threshold && rawDeltaX < 0) {
        dialogProductNode.next();
      }
    })
  }
  
  init () {
    $('[dialog-thumbnail-color]').hide();
  }
  
  show () {
    $('[dialog-thumbnail-color]').hide();
    const body = document.querySelector('body');
    body.classList.add('dialog-product-overflow-hidden');
    
    const Upcolor = document.getElementById('color_label').innerHTML.toLowerCase().replace(/(^\s*)|(\s*$)/g, "" ).replace(" ","_");
    const colorAttributeList = $('[dialog-thumbnail-color="' + Upcolor + '"]');
    const index = window.globalData['currentProductThumbsIndex'];
    colorAttributeList.show();
    this.newLargeImage(colorAttributeList[index]);
  }
  
  hide () {
    const body = document.querySelector('body');
    body.classList.remove('dialog-product-overflow-hidden');
  }
  
  prev () {
    var Upcolor = document.getElementById('color_label').innerHTML.toLowerCase().replace(/(^\s*)|(\s*$)/g, "" ).replace(" ","_");
    var color_attribute = '[thumbnail-color="' + Upcolor + '"]';
    const colorThumbsList = $(color_attribute);
    const len = colorThumbsList.length;
    let index = window.globalData['currentProductThumbsIndex'];
    
    if (index === 0) {
      index = window.globalData['currentProductThumbsIndex'] = len - 1;
    } else {
      index = window.globalData['currentProductThumbsIndex'] = index - 1;
    }
    this.newLargeImage(colorThumbsList[index]);
  }
  
  next () {
    var Upcolor = document.getElementById('color_label').innerHTML.toLowerCase().replace(/(^\s*)|(\s*$)/g, "" ).replace(" ","_");
    var color_attribute = '[thumbnail-color="' + Upcolor + '"]';
    const colorThumbsList = $(color_attribute);
    const len = colorThumbsList.length;
    
    let index = window.globalData['currentProductThumbsIndex'];
    
    if (index === len - 1) {
      index = window.globalData['currentProductThumbsIndex'] = 0;
    } else {
      index = window.globalData['currentProductThumbsIndex'] =  index + 1;
    }
    this.newLargeImage(colorThumbsList[index]);
  }
  
  newLargeImage(x) {
    let clickedImageMediaId = x.dataset.mediaId;
    const newImage = document.querySelector(`.dialog-product__media-item-handler[data-media-id="${clickedImageMediaId}"]`);
    const parentData = newImage.parentElement;

    parentData.prepend(newImage);
    newImage.style.display = "block";
  
    document.querySelectorAll('.dialog-slide-image-handler').forEach(thumb => thumb.classList.remove('active-thumb'));
    document.querySelector(`.dialog-slide-image-handler[data-media-id="${clickedImageMediaId}"]`).classList.add('active-thumb');
  };
}

customElements.define('dialog-product', DialogProduct);

class MenuSectionList extends HTMLElement {
  
  constructor() {
    super();
  }
}

customElements.define('menu-section-list', MenuSectionList);